<template>
	<div class="page">
		<!-- 展示列表模块 -->
		<!-- <div class="top">
			<div style="float:left;"><span @click="goBack" class="goback">用户管理</span>　|　<span>日志记录</span></div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div> -->
		<div class="headerTop">
            <!-- 搜索栏 -->
			<div class="sousuo">
				用户名称:
				<el-input type="text" v-model="search_commodity" class="inpu searchinp" placeholder="输入用户名称"></el-input>
			    记录时期:
			    <el-date-picker v-model="value" type="daterange" align="left" unlink-panels value-format="yyyy-MM-dd"
			     range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
			    </el-date-picker>
				<el-button type="primary" class="btn" size="small" @click="searchGoods">查询</el-button>
				<el-button type="primary" size="small" @click="showAll" v-if="all">刷新全部</el-button>
			</div>
		</div>

		<div class="container_table">
			<el-table :data="tabledata" border size="mini" style="width: 99.4%;" 
			 :header-cell-style="{
				'background-color':tableHead,
				'color': 'white',
                'fontSize':'0.3rem',
				'height':'0.6rem',
				'line-height':'0.6rem',
				'padding':'0.1rem'
			}" :cell-style="{'fontSize':'0.3rem'}">
				<!-- <el-table-column type="selection" min-width="30" fixed header-cell-style="color:red;background-color:blue;">
				</el-table-column> -->
				<el-table-column label="ID" prop="id" align="center" min-width="60">
				</el-table-column>
				<el-table-column prop="user_name" label="用户名称" align="center" min-width="120">
				</el-table-column>
				<el-table-column prop="info" label="信息" align="center" min-width="120">
				</el-table-column>
				<el-table-column prop="ip" label="登录IP" align="center" min-width="150">
				</el-table-column>
				<!-- <el-table-column prop="trigger_cond" label="登录地址" align="center" min-width="150">
        </el-table-column> -->
				<el-table-column prop="log_time" label="时间" align="center" min-width="150">
				</el-table-column>

			</el-table>
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="current_change" :current-page="queryParams.pageNo"
				 :page-size="queryParams.pageSize" :page-sizes="[10,15,20]" layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	// import BMap from 'BMap'
	export default {
		name: 'userlog',
		data() {
			return {
				all: false,
				tableHead:localStorage.getItem("bgcolor"),
				search_commodity: '', //输入框内容
				queryParams: {
					pageNo: 1,
					pageSize:10,
					total: 0
				},
				//pburl:'http://39.98.232.220:8083/',
				tabledata: [],
			    value: [],
				pickerOptions:this.$pickerOptions
            }
		},

		created() {
			this.value=[this.$getNowFormatDate(),this.$getNowFormatDate()];
			this.showList(1, this.queryParams.pageSize,'',this.value.join('~'));
		},
		methods: {
			current_change: function(currentPage) {
				this.queryParams.pageNo = currentPage;
				this.showList(currentPage, this.queryParams.pageSize,this.search_commodity, this.value.join('~'));
			},
			handleSizeChange(val) {
				this.queryParams.pageSize = val;
				this.showList(this.queryParams.pageNo, val,this.search_commodity, this.value.join('~'));
			},

			//获取数据函数
			showList: function(num, size, name, time) {
				var that = this;
				this.$http({
						method: 'post',
						url: 'api/user/logs',
						data: {
							"keyword": name,
							"log_time": time,
							"limit": size,
							"page": num
							
						}
					}).then(res => {
						if (res && res.data.result == "success"){
						that.tabledata = res.data.data;
					    this.queryParams.total = res.data.count;
						
                       }
					}).catch(error => {
						this.tabledata = [];
						this.queryParams.total = 0;
						this.queryParams.pageNo = 1;
                    });
			},

			// 点击搜索输入框里的内容
			searchGoods() {
				this.all = true;
				this.queryParams.pageNo=1;
				// console.log(this.value);
				if ((this.value !== null) && (this.value !== [])) {
					this.showList(1, this.queryParams.pageSize, this.search_commodity, this.value.join('~'));
				} else {
					this.showList(1, this.queryParams.pageSize, this.search_commodity);
				}

			},
			showAll() {
				this.queryParams.pageNo=1;
				this.all = false;
				this.search_commodity = '';
				this.value = [];
				this.showList(1, this.queryParams.pageSize);
			},
			goBack() {
				this.$router.go(-1);
			}
        }
	}
</script>

<style scoped>
	@media all and (max-width:1600px){
		.container_table {
			margin-top:0.4rem!important;
			
		} 
	}
	.searchinp{
		margin-right:0.4rem;
	}
	/* 搜索栏 */
	.sousuo {
		/* float:left; */
		display: block;
		width:100%;
		height: 0.9rem;
		line-height: 0.9rem;
		font-size: 0.3rem;
		color: rgba(51, 51, 51, 1);
		text-align: left;
	}
   
	.btn {
		margin-left:0.4rem;
	}

	/* 表格 */
	.container_table {
		margin-top: 0.2rem;
		
	} 
   
   .inpu {
		vertical-align: middle;
		width:5rem;
		font-size: 0.25rem;
	}
	.pagination{
		margin-top:0.1rem;
	}
</style>
